import React from 'react'
import Router from 'next/router'
import marked from 'marked'
import ArticleUserHeader from './ArticleUserHeader'
import ArticleContentWrapper from './ArticleContentWrapper'
import { message, Icon } from 'antd'
import Highlight from 'react-highlight'
import { hostname } from '../../config/host.config'
import axios from '../../config/axios'

import '../../node_modules/highlight.js/styles/agate.css'

class ArticleContent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.state = {
            articleId: null,
            article: null,
            user: null,
            type: 'heart-o'
        }
    }

    async getArticle() {
        const res = await axios.post(hostname + '/blog/article', {
            articleId: Router.router.query.param
        })
        if (res.status === 200 && res.data.statusCode === 1) {
            this.setState({
                articleId: Router.router.query.param,
                article: res.data.statusMsg.list,
                user: res.data.statusMsg.user
            })
        }
    }

    async getCollectStatus() {
        const res = await axios.post(hostname + '/blog/getCollectStatus', {
            article: Router.router.query.param
        })
        if (res.data.statusCode === 1) {
            this.setState({ type: 'heart' })
        } else {
            this.setState({ type: 'heart-o' })
        }
    }

    async addCollect() {
        const res = await axios.post(hostname + '/blog/addCollect', {
            article: Router.router.query.param
        })
        switch (res.data.statusCode) {
            case 1:
                this.setState({ type: 'heart' })
                break
            case 2:
                this.setState({ type: 'heart-o' })
                break
            case -1:
                message.warn("请先登录")
                break
            case 0:
                message.warn("发生错误")
                break
        }
    }

    componentDidMount() {
        this.getArticle()
        this.getCollectStatus()
    }

    render() {
        const headTitle = this.state.article ? this.state.article.title : ''
        const content = this.state.article ? this.state.article.content : ''
        const output = marked(content)
        return (
            <ArticleContentWrapper>
                <div className="article-content">
                    <div className="article-content-wrapper">
                        <h1 className="header">{headTitle}</h1>
                        <div className="article-content-header">
                            <ArticleUserHeader blog={this.state.article ? this.state.article : null}
                                user={this.state.user ? this.state.user : null} />
                        </div>
                        <div className="menu-button" onClick={() => this.addCollect()}>
                            <Icon type={this.state.type} style={{ lineHeight: '40px', fontSize: '20px' }} />
                        </div>
                        <div className="article-content-middle">
                            <Highlight innerHTML>
                                {output}
                            </Highlight>
                        </div>
                    </div>
                    <style jsx>{`
                        .article-content {
                            margin: 0 auto;
                            min-height: 100%;
                            height: auto;
                            padding: 20px 10px;
                        }
                        .article-content-wrapper {
                            background: #ffffff;
                            margin: auto;
                            padding: 30px 25px 30px;
                            min-height: 100%;
                            height: auto;
                            box-shadow: 0 1px 3px rgba(56, 56, 56, 0.1);
                            background-color: #ffffff;
                            border-radius: 3px;
                            max-width: 840px;
                            line-height: 30px;
                            overflow-x: auto;
                            color: #3e3e3e;
                            font-size: 15px;
                        }
                        .header {
                            padding: 0 10px 0 10px;
                            font-weight: 700;
                        }
                        .article-content-header {
                            padding: 0 10px 0 10px;
                        }
                        .writer {
                            color: #5496e8;
                            font-style: italic;
                        }
                        .article-content-middle {
                            margin: 20px 0 0 0;
                            padding: 0 10px;
                        }
                        .menu-button {
                            position: fixed;
                            right: 50px;
                            bottom: 40px;
                            border-radius: 50%;
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            border: 1px solid #42b4e0;
                            cursor: pointer;
                            background: #ffffff;
                        }
                        .menu-button i{
                            font-size: 25px;
                        }
                    `}</style>
                </div>
            </ArticleContentWrapper>
        )
    }
}

export default ArticleContent